

<template>
  <div class="container">
    <!-- 头部区域 -->
    <header>
      <div class="logo-container">
        <div class="logo">
          <i class="fas fa-heartbeat"></i>
        </div>
        <div class="logo-text">
          <h1>智慧医养大数据公共服务平台</h1>
          <h2>个人健康档案系统</h2>
        </div>
      </div>

      <div class="user-profile">
        <div class="user-avatar">{{userInfo?.id||"请"}}</div>
        <div class="user-info">
          <div class="user-name">{{userInfo?.username||"登录"}}</div>

        </div>
        <i class="fas fa-chevron-down"></i>
      </div>
    </header>

    <!-- 欢迎面板 -->
    <div class="welcome-panel">
      <div class="welcome-header">
        <div class="welcome-text">
          <h2>欢迎您，{{userInfo?.username||"游客"}}先生！</h2>
          <p>智慧医养平台致力于为您提供全生命周期的健康数据管理服务。我们整合医疗记录、健康指标和生活方式数据，帮助您全面掌握健康状况。</p>
        </div>

      </div>
    </div>

    <el-button type="primary" icon="el-icon-bell" @click="acceptAuthorizationRequest">公告</el-button>

    <el-dialog v-model="dialogVisible" title="授权申请列表">
      <el-table :data="applyList" border>
        <el-table-column prop="applicantId" label="申请人id" />
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="success" size="small" @click="handleApply(row, 'approved')">给予授权</el-button>
            <el-button type="danger" size="small" @click="handleApply(row, 'rejected')">拒绝授权</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <h2 class="section-title">核心功能</h2>

    <!-- 功能卡片区域 -->
    <div class="feature-cards">
      <div class="card">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <h3>权限管理</h3>
        </div>
        <div class="card-content">
          <p>多级权限控制系统，保障您的健康数据隐私和安全。</p>
          <ul class="features-list">
            <li>多角色权限控制</li>
            <li>细粒度权限设置</li>
            <li>动态权限调整</li>
            <li>访问审计追踪</li>
          </ul>
        </div>

      </div>

      <div class="card">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-file-medical"></i>
          </div>
          <h3>健康档案管理</h3>
        </div>
        <div class="card-content">
          <p>全面整合您的医疗记录、检查报告和健康数据。</p>
          <ul class="features-list">
            <li>数据整合录入</li>
            <li>档案更新维护</li>
            <li>多条件查询检索</li>
            <li>历史记录追溯</li>
          </ul>
        </div>

      </div>

      <div class="card">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <h3>健康数据分析</h3>
        </div>
        <div class="card-content">
          <p>智能分析健康趋势，提供个性化健康建议。</p>
          <ul class="features-list">
            <li>指标监测分析</li>
            <li>疾病风险评估</li>
            <li>可视化数据展示</li>
            <li>异常情况预警</li>
          </ul>
        </div>

      </div>

      <div class="card">
        <div class="card-header">
          <div class="card-icon">
            <i class="fas fa-clipboard-list"></i>
          </div>
          <h3>日志审计</h3>
        </div>
        <div class="card-content">
          <p>全面记录系统操作，保障数据安全合规。</p>
          <ul class="features-list">
            <li>操作日志记录</li>
            <li>日志查询检索</li>
            <li>数据存储备份</li>
            <li>安全合规审计</li>
          </ul>
        </div>

      </div>
    </div>

    <!-- 健康趋势图表 -->
    <div class="chart-container">
      <div class="chart-header">
        <h3 class="chart-title">健康趋势分析示例</h3>
        <div class="chart-actions">
          <button class="chart-btn active">周</button>
          <button class="chart-btn">月</button>
          <button class="chart-btn">年</button>
        </div>
      </div>
      <div class="chart-wrapper">
        <canvas ref="healthChart"></canvas>
      </div>
    </div>

    <!-- 波浪底部 -->
    <div class="wave-container">
      <div class="wave"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
import axios from 'axios';
const userInfo = ref(null);
const storedUser = localStorage.getItem('currentUser');
import { ElButton, ElDialog, ElTable, ElTableColumn, ElMessage } from 'element-plus';
userInfo.value = JSON.parse(storedUser);
// 图表初始化
const healthChart = ref(null);

onMounted(() => {
  if (healthChart.value) {
    const ctx = healthChart.value.getContext('2d');
    // 模拟健康数据
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    const heartRate = [72, 71, 75, 73, 70, 68, 72];
    const steps = [7542, 8231, 6987, 9320, 8450, 11020, 8542];
    const sleep = [7.2, 6.8, 7.5, 7.0, 6.5, 8.2, 7.8];

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: days,
        datasets: [
          {
            label: '心率 (bpm)',
            data: heartRate,
            borderColor: '#f44336',
            backgroundColor: 'rgba(244, 67, 54, 0.1)',
            borderWidth: 3,
            tension: 0.3,
            fill: true
          },
          {
            label: '步数 (千步)',
            data: steps.map(s => s/1000),
            borderColor: '#4caf50',
            backgroundColor: 'rgba(76, 175, 80, 0.1)',
            borderWidth: 3,
            tension: 0.3,
            fill: true
          },
          {
            label: '睡眠时长 (小时)',
            data: sleep,
            borderColor: '#2196f3',
            backgroundColor: 'rgba(33, 150, 243, 0.1)',
            borderWidth: 3,
            tension: 0.3,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
            labels: {
              font: {
                size: 14
              },
              padding: 20
            }
          },
          tooltip: {
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            titleColor: '#1565c0',
            bodyColor: '#37474f',
            borderColor: '#e3f2fd',
            borderWidth: 1,
            padding: 12,
            boxPadding: 6,
            usePointStyle: true,
            callbacks: {
              label: function(context) {
                let label = context.dataset.label || '';
                if (label.includes('步数')) {
                  return label + ': ' + (context.parsed.y * 1000).toLocaleString() + ' 步';
                }
                return label + ': ' + context.parsed.y;
              }
            }
          }
        },
        scales: {
          x: {
            grid: {
              display: false
            },
            ticks: {
              font: {
                size: 12
              }
            }
          },
          y: {
            beginAtZero: false,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            },
            ticks: {
              font: {
                size: 12
              }
            }
          }
        },
        interaction: {
          intersect: false,
          mode: 'index'
        },
        elements: {
          point: {
            radius: 4,
            hoverRadius: 6
          }
        }
      }
    });
  }

  // 时间范围按钮交互
  document.querySelectorAll('.chart-btn').forEach(button => {
    button.addEventListener('click', function() {
      document.querySelectorAll('.chart-btn').forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
      // 这里可以添加更新图表数据的逻辑
    });
  });

  // 卡片悬停动画
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseenter', function () {
      this.style.transform = 'translateY(-10px)';
    });

    card.addEventListener('mouseleave', function () {
      this.style.transform = 'translateY(0)';
    });
  });
});
// 数据定义
const dialogVisible = ref(false);
const applyList = ref([]);

// 方法定义
const acceptAuthorizationRequest = async () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('currentUser'));
    const response = await axios.get(`http://localhost:8080/api/applies/target/${userInfo.id}`);
    console.log('授权申请列表响应数据:', response.data.data);
    applyList.value = response.data.data;
    dialogVisible.value = true;
  } catch (error) {
    console.error('获取授权申请列表失败:', error);
  }
};

const handleApply = async (apply, status) => {
  try {
    await axios.post(`http://localhost:8080/api/handle-apply`, null, {
      params: {
        applyId: apply.id,
        status: status
      }
    });
    ElMessage.success(status === 'approved' ? '已给予授权' : '已拒绝授权');
    acceptAuthorizationRequest(); // 刷新列表
  } catch (error) {
    console.error('处理授权申请失败:', error);
    ElMessage.error('处理授权申请失败');
  }
};
</script>

<style scoped>


:root {
  --primary: #ffffff;
  --primary-dark: #1565c0;
  --primary-light: #f1f1f1;
  --accent: #00bcd4;
  --light: #e3f2fd;
  --white: #ffffff;
  --text: #37474f;
  --shadow: rgba(30, 136, 229, 0.2);
  --success: #4caf50;
  --warning: #ff9800;
  --danger: #f44336;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.05' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,192C672,181,768,139,864,138.7C960,139,1056,181,1152,181.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  z-index: -1;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* 头部样式 */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 2rem;
  position: relative;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.8rem;
  box-shadow: 0 4px 15px var(--shadow);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text h1 {
  font-size: 1.8rem;
  color: var(--white);
  font-weight: 700;
  letter-spacing: 1px;
}

.logo-text h2 {
  font-size: 1.2rem;
  color: var(--light);
  font-weight: 400;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-profile:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.user-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: bold;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  color: var(--white);
}

.user-role {
  font-size: 0.85rem;
  color: var(--light);
}

/* 欢迎面板 */
.welcome-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(227, 242, 253, 0.9));
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 15px 30px rgba(30, 136, 229, 0.2);
  position: relative;
  overflow: hidden;
}

.welcome-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  opacity: 0.1;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.welcome-text h2 {
  font-size: 2.2rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.welcome-text p {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 600px;
  line-height: 1.6;
}

.health-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.stat-card {
  flex: 1;
  background: var(--white);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--white);
}

.icon-heart {
  background: linear-gradient(135deg, var(--danger), #ff6b6b);
}

.icon-steps {
  background: linear-gradient(135deg, var(--success), #66bb6a);
}

.icon-sleep {
  background: linear-gradient(135deg, var(--primary), #42a5f5);
}

.stat-info h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.stat-info p {
  font-size: 1.8rem;
  color: var(--primary-dark);
  font-weight: 700;
}

/* 功能卡片区域 */
.section-title {
  font-size: 1.8rem;
  color: var(--white);
  margin: 2.5rem 0 1.5rem;
  font-weight: 600;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 25%;
  width: 50%;
  height: 4px;
  background: var(--white);
  border-radius: 2px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(30, 136, 229, 0.25);
}

.card-header {
  padding: 1.8rem 1.8rem 1rem;
  position: relative;
}

.card-icon {
  position: absolute;
  top: -25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.8rem;
  box-shadow: 0 8px 20px var(--shadow);
}

.card h3 {
  font-size: 1.5rem;
  color: var(--primary-dark);
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.card-content {
  padding: 0 1.8rem 1.8rem;
  flex-grow: 1;
}

.card p {
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.features-list {
  list-style: none;
  margin-top: 1rem;
}

.features-list li {
  padding: 0.5rem 0;
  display: flex;
  align-items: flex-start;
}

.features-list li::before {
  content: '✓';
  color: var(--success);
  font-weight: bold;
  margin-right: 10px;
}

.card-footer {
  padding: 1.2rem 1.8rem;
  background: rgba(227, 242, 253, 0.6);
  border-top: 1px solid rgba(30, 136, 229, 0.1);
  display: flex;
  justify-content: flex-end;
}

.btn {
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  box-shadow: 0 5px 15px var(--shadow);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--shadow);
}

/* 图表区域 */
.chart-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 2.5rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chart-title {
  font-size: 1.5rem;
  color: var(--primary-dark);
  font-weight: 700;
}

.chart-actions {
  display: flex;
  gap: 0.8rem;
}

.chart-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  background: rgba(227, 242, 253, 0.7);
  border: none;
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-btn.active, .chart-btn:hover {
  background: var(--primary);
  color: var(--white);
}

.chart-wrapper {
  height: 300px;
  position: relative;
}

/* 波浪底部 */
.wave-container {
  position: relative;
  margin-top: 4rem;
  height: 150px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25" /><path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5" /><path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" /></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  animation: waveAnimation 12s linear infinite;
}

@keyframes waveAnimation {
  0% { transform: translateX(0); }
  50% { transform: translateX(-25%); }
  100% { transform: translateX(-50%); }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .health-stats {
    flex-direction: column;
  }

  .welcome-header {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 1.5rem;
  }

  header {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .logo-container {
    justify-content: center;
  }

  .user-profile {
    width: 100%;
    justify-content: center;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .welcome-panel {
    padding: 1.8rem;
  }

  .welcome-text h2 {
    font-size: 1.8rem;
  }
}
</style>
<!--<style scoped>-->
<!--/* 保留所有原始CSS样式 */-->
<!--:root {-->
<!--  &#45;&#45;primary: #1e88e5;-->
<!--  &#45;&#45;primary-dark: #1565c0;-->
<!--  &#45;&#45;primary-light: #64b5f6;-->
<!--  &#45;&#45;accent: #00bcd4;-->
<!--  &#45;&#45;light: #e3f2fd;-->
<!--  &#45;&#45;white: #ffffff;-->
<!--  &#45;&#45;text: #37474f;-->
<!--  &#45;&#45;shadow: rgba(30, 136, 229, 0.2);-->
<!--  &#45;&#45;success: #4caf50;-->
<!--  &#45;&#45;warning: #ff9800;-->
<!--  &#45;&#45;danger: #f44336;-->
<!--}-->

<!--* {-->
<!--  margin: 0;-->
<!--  padding: 0;-->
<!--  box-sizing: border-box;-->
<!--  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;-->
<!--}-->

<!--body {-->
<!--  background: linear-gradient(135deg, var(&#45;&#45;primary-light), var(&#45;&#45;primary));-->
<!--  color: var(&#45;&#45;text);-->
<!--  min-height: 100vh;-->
<!--  overflow-x: hidden;-->
<!--  position: relative;-->
<!--}-->

<!--/* ... 保留所有原始CSS样式 ... */-->

<!--.wave-container {-->
<!--  position: relative;-->
<!--  margin-top: 4rem;-->
<!--  height: 150px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.wave {-->
<!--  position: absolute;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".25" /><path d="M0 0v15.81c13 21.11 27.64 41.05 47.69 56.24C99.41 111.27 165 111 224.58 91.58c31.15-10.15 60.09-26.07 89.67-39.8 40.92-19 84.73-46 130.83-49.67 36.26-2.85 70.9 9.42 98.6 31.56 31.77 25.39 62.32 62 103.63 73 40.44 10.79 81.35-6.69 119.13-24.28s75.16-39 116.92-43.05c59.73-5.85 113.28 22.88 168.9 38.84 30.2 8.66 59 6.17 87.09-7.5 22.43-10.89 48-26.93 60.65-49.24V0z" opacity=".5" /><path d="M0 0v5.63C149.93 59 314.09 71.32 475.83 42.57c43-7.64 84.23-20.12 127.61-26.46 59-8.63 112.48 12.24 165.56 35.4C827.93 77.22 886 95.24 951.2 90c86.53-7 172.46-45.71 248.8-84.81V0z" /></svg>');-->
<!--  background-size: cover;-->
<!--  background-repeat: no-repeat;-->
<!--  animation: waveAnimation 12s linear infinite;-->
<!--}-->

<!--@keyframes waveAnimation {-->
<!--  0% { transform: translateX(0); }-->
<!--  50% { transform: translateX(-25%); }-->
<!--  100% { transform: translateX(-50%); }-->
<!--}-->

<!--/* 响应式设计 */-->
<!--@media (max-width: 992px) {-->
<!--  .health-stats {-->
<!--    flex-direction: column;-->
<!--  }-->

<!--  .welcome-header {-->
<!--    flex-direction: column;-->
<!--    gap: 1.5rem;-->
<!--  }-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .container {-->
<!--    padding: 1.5rem;-->
<!--  }-->

<!--  header {-->
<!--    flex-direction: column;-->
<!--    gap: 1.5rem;-->
<!--    text-align: center;-->
<!--  }-->

<!--  .logo-container {-->
<!--    justify-content: center;-->
<!--  }-->

<!--  .user-profile {-->
<!--    width: 100%;-->
<!--    justify-content: center;-->
<!--  }-->

<!--  .section-title {-->
<!--    font-size: 1.6rem;-->
<!--  }-->

<!--  .welcome-panel {-->
<!--    padding: 1.8rem;-->
<!--  }-->

<!--  .welcome-text h2 {-->
<!--    font-size: 1.8rem;-->
<!--  }-->
<!--}-->
<!--</style>-->
